Lazy Load Added#54
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This pull request implements native lazy loading for testimonial images on the Keploy Fellowship website to improve initial page load performance. The changes add the loading="lazy" attribute to five testimonial images, which defers their loading until they're about to enter the viewport, reducing initial bandwidth usage and improving page load time.
Changes:
- Added
loading="lazy"attribute to all five testimonial images (sanskriti.avif, sukriti.avif, neel.jpg, harsh.avif, arunima.avif) - Improved alt text for testimonial images by adding descriptive names instead of empty alt attributes
- Added a before-after.md documentation file
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| index.html | Added lazy loading and improved alt text for five testimonial images in the testimonials section |
| before-after.md | Documentation describing UI changes, though the described changes don't match the actual code modifications in this PR |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - Hero section header text appears slightly lower, leaving more vertical space above the title. | ||
| - "GET STARTED" button is filled (solid orange background) with white text. | ||
| - The next section header ("What's in it for you ?") is visible at the fold, with the top of the feature cards showing. | ||
| - Overall page height within the viewport shows more content below the hero section. | ||
|
|
||
| ## After (Second Screenshot) | ||
| - Hero section header text appears slightly higher, with "WELCOME TO KEPLOY" closer to the top edge. | ||
| - "GET STARTED" button is outlined (orange border) with white background and orange text. | ||
| - The next section header is no longer visible at the fold; the hero section occupies more vertical space. | ||
| - Overall layout feels more compact in the hero area with less content visible below. |
There was a problem hiding this comment.
The described changes in this document (button styling changes from filled to outlined, hero section spacing adjustments, content visibility at the fold) do not match the actual code changes in this PR. The PR only adds lazy loading attributes to testimonial images and improves their alt text. No CSS or layout changes are present in the diff. This documentation appears to be describing unrelated UI changes that are not part of this pull request.
| <img class="icon" src="./images/code1.gif"></img> | ||
| </div> | ||
| <div class="service-text"> | ||
| <h3 class="h2">Learn</h3> | ||
| <p>Get one-on-one training about APIs and Keploy by the Keploy team.</p> | ||
| <p>Perks: 🎁 Exclusive swag kit by Keploy</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-block service-item" data-aos="fade-up"> | ||
| <div class="service-icon"> | ||
| <img class="icon" src="./images/code2.gif"></img> | ||
| </div> | ||
| <div class="service-text"> | ||
| <h3 class="h2">Teach</h3> | ||
| <p>Take sessions in your college or community and spread awareness about the world of APIs and Keploy.</p> | ||
| <p>Perks: 🖼 Recognition on our Website</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-block service-item" data-aos="fade-up"> | ||
| <div class="service-icon"> | ||
| <img class="icon" src="./images/code3.gif"></img> |
There was a problem hiding this comment.
The service section icon images (code1.gif, code2.gif, code3.gif) could also benefit from lazy loading since they appear below the fold in the "What's in it for you?" section. Consider adding loading="lazy" to these images as well to further optimize initial page load performance, consistent with the optimization goal of this PR.
| <img class="icon" src="./images/code1.gif"></img> | ||
| </div> | ||
| <div class="service-text"> | ||
| <h3 class="h2">Learn</h3> | ||
| <p>Get one-on-one training about APIs and Keploy by the Keploy team.</p> | ||
| <p>Perks: 🎁 Exclusive swag kit by Keploy</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-block service-item" data-aos="fade-up"> | ||
| <div class="service-icon"> | ||
| <img class="icon" src="./images/code2.gif"></img> | ||
| </div> | ||
| <div class="service-text"> | ||
| <h3 class="h2">Teach</h3> | ||
| <p>Take sessions in your college or community and spread awareness about the world of APIs and Keploy.</p> | ||
| <p>Perks: 🖼 Recognition on our Website</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-block service-item" data-aos="fade-up"> | ||
| <div class="service-icon"> | ||
| <img class="icon" src="./images/code3.gif"></img> |
There was a problem hiding this comment.
The service icon images are missing alt attributes. For accessibility, all images should have descriptive alt text. Consider adding alt attributes like alt="Learn icon", alt="Teach icon", and alt="Grow icon" to help screen reader users understand the visual content.
Signed-off-by: Krish Patel <krishhpatel1905@gmail.com>
T143,
Description
This pull request improves the website's performance by implementing native lazy loading for testimonial images in index.html.
Problem
Currently, testimonial images (.avif and .jpg) are loaded eagerly during the initial page load. This causes unnecessary bandwidth usage and increases the page's initial load time, even when the testimonials section is not immediately visible to the user.
Solution
Added the loading="lazy" attribute to all testimonial![]()
tags to ensure that images load only when they are about to enter the viewport.
This enhances performance and optimizes resource loading without affecting UI or functionality.
Fixes #143
Type of change
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update
How Has This Been Tested?
Ran the project locally using Live Server.
Opened Browser DevTools → Network tab.
Verified that testimonial images are not loaded during initial page render.
Confirmed that images load correctly when scrolling to the testimonials section.
Tested in Google Chrome and Microsoft Edge.
No additional configuration was required.
Before Page :
After Page (Fixed Issue):
